<div data-bind="css:css,click:_onFieldClick">
    <!-- ko if:field.__inputType == 'textarea' -->
    <textarea class="form-control"
              data-bind="css:field.__inputCss,enable:field.__enable,value:field.__displayValue,attr:field.__attr"></textarea>
    <!-- /ko -->
    <!-- ko if:field.__inputType == 'text' -->
    <input class="form-control" data-bind="css:field.__inputCss,enable:field.__enable,value:field.__displayValue,attr:field.__attr">
    <!-- /ko -->
    <div class="invalid-tooltip" data-bind="text:field.validateMessage"></div>
    <!-- ko if:field.__showCollapse -->
    <div data-bind="css:field.__collapseCss,event:{mouseleave:_mouseleave},attr:{id:field.__collapseId}">
        <!-- ko if:field.type == 'checkboxes' -->
        <div class="border bg-white p-2">
            <div class="row">
            <!-- ko foreach:field._options -->
            <div class="form-check" data-bind="css:$parent.field.option._css">
                <input class="form-check-input" type="checkbox"
                       data-bind="checked:$parent.record[$parent.field.name],value:$data[$parent.field.option.valueField],attr:{id:'check_'+$parent.field.name+'_'+$index()}">
                <label class="mb-0"
                       data-bind="text:$data[$parent.field.option.displayField],attr:{for:'check_'+$parent.field.name+'_'+$index()}"></label>
            </div>
            <!-- /ko -->
            </div>
        </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
</div>
